<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入React模块 -->
    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
    <!-- 引入ReactDOM 模块模块 -->
    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
    <!-- 浏览器不认识 JSX 语法，需要 babel.js 提供支持，配置类型 type=“text/babel” -->
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="app">
        <?xml version="1.0" standalone="no"?>
        <svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
        
          <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
          <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
        
          <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
          <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
        
          <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
          <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
              stroke="orange" fill="transparent" stroke-width="5"/>
        
          <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
              stroke="green" fill="transparent" stroke-width="5"/>
        
          <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
        </svg>
        
    </div>
    <script type="text/babel">
        let app = document.querySelector('#app');
        let root = ReactDOM.createRoot(app);
        /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
        let Page1 = () => {
            const [iptValue, setIptValue] = React.useState('')

            const [isPadding, startTransition] = React.useTransition()

            let iptChange = (e) => {
                startTransition(() => {
                    setIptValue(e.target.value)
                })
            }
            return (
                <div>
                    <p>
                        {isPadding ? <div>加载中。。。</div> : "加载完成"}
                    </p>
                    <input type="text" name="" id="" onChange={iptChange} />
                    <div>
                        {
                            Array(9999).fill('233').map(item => <div key={Math.random()}>{iptValue}</div>)
                        }
                    </div>
                </div>
            )
        }
        /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
        let ele = (
            <React.Fragment>
                <Page1 />
            </React.Fragment >
        )
        // root.render(ele);
    </script>
</body>

</html>